<template>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">

    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :label="'允许开盖时间' + (index + 1)"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
      :rules="{
      required: false, message: '', trigger: 'blur'
    }"
    >
      <!--<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
      <el-time-picker
        placeholder="起始时间"
        v-model="domain.startTime"
        value-format="HH:mm:ss"
      >
      </el-time-picker>
      <el-time-picker
        class="end_picker_row"
        placeholder="结束时间"
        v-model="domain.endTime"
        value-format="HH:mm:ss"
      >
      </el-time-picker>
      <el-button @click.prevent="removeDomain(domain)" v-if="index !== 0">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
      <el-button @click="addDomain">新增开盖时间</el-button>
      <!--<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>-->
    </el-form-item>
  </el-form>
</template>

<script type="text/ecmascript-6">
  import {add,detail} from "@/api/device/timer";
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            startTime: '',
            endTime: ''
          }],
        },
        dynamicValidateFormOrigin:{
          domains: [{
            startTime: '',
            endTime: ''
          }],
        }
      };
    },
    props: [ "timerRow", 'scopeRow'],
    mounted() {
      if(this.scopeRow) {
        this.hanndelData()
      } else {
        this.getToTime()
      }
    },
    methods: {
      getToTime() {
        detail({garbageSortDeviceId: this.timerRow.id,workdateType: 0})
          .then(res => {
            if (res.data && res.data.timeSlotList) {
              this.dynamicValidateForm.domains = res.data.timeSlotList
            }
          })
      },
      hanndelData() {
        if (this.scopeRow.timeSlotList && this.scopeRow.timeSlotList.length >0) {
          this.dynamicValidateForm.domains = this.scopeRow.timeSlotList
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            if (this.dynamicValidateForm.domains.startTime == '' || this.dynamicValidateForm.domains.endTime == '') {
              this.$message({
                type: "error",
                message: "时间不能为空"
              });
              return false
            }
            add({
              garbageSortDeviceId: this.timerRow.id,
              timeSlots:  this.dynamicValidateForm.domains,
              workdateType: (this.scopeRow|| {}).workdateType || 0
            }).then(() => {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.$emit('refresh')
            }, error => {
              window.console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
//      resetForm(formName) {
//        this.$refs[formName].resetFields();
//      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          startTime: '',
          endTime: '',
          key: Date.now()
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.end_picker_row{
  margin: 0 20px;
}
</style>
